<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <a class="{active:comName=='com1'}" @click="tab('com1')">登录</a>
      <a class="{active:comName=='com2'}" @click="tab('com2')">注册</a>
      <a class="{active:comName=='com3'}" @click="tab('com3')">首页</a>
      <transition mode="out-in">
        <component :is="comName"></component>
      </transition>
    </div>

    <template id="com1">
      <div class="login">
        <!--登录页面-->
        <div class="login-box">
          <div class="login-left">
            <my-input sendmsg="账号"></my-input>
            <my-input sendmsg="密码" type="password"></my-input>
            <div>
              <my-button sendmsg="登录" @click="login"></my-button>
              <my-button sendmsg="注册" @click="reg"></my-button>
            </div>
          </div>
          <div class="login-right">
            <!--QR-->
          </div>
        </div>
      </div>
    </template>


    <template id="com2">
      <div style="width: 100vw;height: 50vh;background-color: blue;">这里是我的页面的内容
        <!--注册页面-->
        <my-input></my-input>
      </div>
    </template>

    <template id="com3">
      <div style="width: 100vw;height: 50vh;background-color:greenyellow;">这里是关于的页面

        <!-- 首页 -->
      </div>
    </template>

    <template id="my-input">
      <div class="my-input">
        <div class="input-box">
          <p>{{sendmsg}}</p><input type="type" placeholder="sendmsg" />
        </div>
      </div>
    </template>
    <template id="my-button">
      <div class="my-button">
        <button @click="buttonClick">{{sendmsg}}</button>
      </div>
    </template>
  </body>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-input', {
      tempate: '#my-input',
      //props: ['sendmsg', 'type'],
      pros: {
        sendmsg: {
          type: String,
          required: true
        },
        type: {
          type: String,
          default: 'text'
        }
      }
    })
    Vue.component('my-button', {
      template: '#my-button',
      props: {
        sendmsg: {
          type: String,
          required: true
        }
      },
      methods: {
        buttonClick() {
          console.log(000)
          this.$emit('myclick')
        }
      }
    })
    var com1 = {
      template: '#com1',
      methods: {
        handle() {
          console.log('000')
          alert("登录成功")
        },
        reg(){
          this.comName="com2"
        }
      }
    }
    var com2 = {
      template: '#com2'
    }
    var com3 = {
      template: '#com3'
    }
    var vm = new Vue({
      el: '#app',
      components: {
        com1,
        com2,
        com3
      },
      data: {
        show: 0,
        comName: 'com1'
      },
      methods: {
        tab(e) {
          this.comName = e;
        }
      }
    })
  </script>
  <style>
    .active {
      color: red;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease-in;
    }

    .login .login-box {
      width: 50vw;
      height: 50vw;
      display: flex;
      flex-direction: row;
      background-color: lightgray;
    }

    .login .login-box .login-left {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .login .login-box .login-left .input-box {
      display: flex;
      flex-direction: row;
      height: 44px;
      padding: 10px;
    }

    .my.input-box.input-box p {
      word-break: keep-all;
      margin: 0;
      margin-right: 10px;
    }

    .login .login-box .login-right {
      flex: 1;
      background-color: red;
    }
  </style>
</html>
